<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
	System.out.println("request.getContextPath(): "+path);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
 <head>
		<title>优个网_注册</title>
		<meta charset="utf-8">
		
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/regist.css">
	
	</head>
 <body>
	<header>
		<div id="header"><img src="img/logo_zhuce.jpg"></div>
		
	</header>
	<section id="section">
		<div id="regist">
			<h2 style="margin-bottom:15px;">注册</h2>
			
			<form id="formRegiste" action="${pageContext.request.contextPath}/checkRegist.tq" method=post>
				<ul>
					<li class="clear">
						<span class="lf">手机/邮箱：</span>
						<div class="lf">
							<p style="font-size:14px; font-family:'宋体';background-color:#cd0000;color:#fff; width: 170px;padding:5px;margin-bottom: 5px;">现在注册，有惊喜！！！</p>
							<input id="uname" name="uname" class="input lf bg_img1" type="text" placeholder="手机号/邮箱">
							
						</div>
						<p id="uname_p">${msg!=null?msg:"(请用邮箱、手机号作为您的用户名。QQ邮箱可能会延迟收件)"  }</p>
					</li>
					<li class="pwd">
						<span style="margin-right:10px;">请设置密码：</span>
						<input id="set_pwd" name="pwd" class="input bg_img2"  type="text" placeholder="密码要求为6－20位，字母、数字、特殊字符均可">
						<span id="setpwd" class="current">${msg!=null&&msg.indexOf("密码")!=-1?msg:"(密码要求为6－20位，字母、数字、特殊字符均可。字母区分大小写）"}</span>
						
					</li>
					<li class="pwd" style="margin:22px 0;">
						<span style="margin-right:10px;">请确认密码：</span>
						<input id="check_pwd" class="input bg_img2" type="text" placeholder="输入确认密码">
						<span class="current">重复密码</span>
						
					</li>
					<li class="pwd" style="margin:22px 0;position:relative;">
						<span style="margin-right:10px;">手机验证码：</span>
						<input id="checkCode" class="input" type="text" placeholder="请输入手机验证码">
						<!--<input id="btnSendCode" class="yam_btn" value="获取验证码" style="border:none; onclick="sendMessage()" type="button">-->
						<p id="checkCode_p" style="font-size:14px; font-family:'宋体';background-color:#cd0000;color:#fff; width: 180px;padding:5px;margin-bottom: 5px;position:absolute;left: 86px;top:-21px;display: none;">验证码输入错误 请重新输入</p>
						<canvas id="can" width="100" height="25" style="background-color: #dddddd;position:relative;top: 8px;left: 1px;"></canvas>
						<span id="can_span" style="cursor: pointer;">看不清楚，换一张</span>
					</li>
					<li><input class="mianfeishenqing_btn" style="border:none; " value="注册" id="reg_" type="button"></li>
				</ul>


			</form>

		</div>
		
	</section>
	<div id="tuig" style="padding:20px 0">
			<img src="img/biaoshi1.jpg">
		</div>
		<div id="link">
			<a href="youge.html" target="_block">首页</a>|<a href="#">关于我们</a>|<a href="#">联系我们</a>|<a href="http://www.yoger.com.cn/zhaopin/">加入优个网</a>|<a href="http://www.yoger.com.cn/link.html">友情链接</a>|<a href="http://www.yoger.com.cn/Sitemap.html">网站地图</a>|<a href="http://www.yoger.com.cn/union/schoolunion.html">校园代理</a>|<a href="http://www.yoger.com.cn/union/campus.html">代理查询</a>|<a href="http://www.yoger.com.cn/app.html">手机优个</a>|<a href="http://www.yoger.com.cn/rexiaoxinghao.html">热销型号</a>|<a href="http://www.yoger.com.cn/chanpindaquan.html">商品大全</a>|<a href="http://www.yoger.com.cn/topic/">资讯主题</a>|<a href="http://www.yoger.com.cn/productTopic/">商品主题</a>
		</div>
	<script src="js/jquery-1.11.3.js"></script>
	<script src="js/register.js"></script>
	<script type="text/javascript">
	$("#uname").blur(function(){
		  //alert("");
		  var phone=/^1[3|5|7|8]\d{9}$/;
		  var email=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
		  var $uname=$(this).val();
		  //alert($uname)
		  if($uname=="" || $uname==" "){
		    $("#uname_p").html("请输入有效信息！").css({color:"#e4393c",fontWeight:"bold"});
		    return;
		  }else if(!(phone.test($uname)) && !(email.test($uname))){
			  $(this).val("");
			  alert("邮箱或手机号输入有误！");
			  return;
		  }else{
			  $("#uname_p").html("(请用邮箱、手机号作为您的用户名。QQ邮箱可能会延迟收件)").css({color:"#e4393c",fontWeight:"bold"});
		 
			  $.ajax({
			      type:"post",
			      url:"${pageContext.request.contextPath}/blur.tq",
			      data:"uname="+$uname,
			      success:function(data){
			        console.log(data)
			        if("true"==data){
			          $("#uname_p").html("用户名验证通过！").css({color:"#e4393c",fontWeight:"bold"});
			          $("#set_pwd").attr({disabled:false});
			        }else if("false"==data){
			          $("#uname_p").html("用户名已存在").css({color:"#e4393c",fontWeight:"bold"});
			          $("#set_pwd").attr({disabled:true});
			        }
			      },
			      error:function(data){
			        alert(data);
			      }
			    }
			  );
		  
		  
		  }
		 
		});
	
	
	$("#set_pwd").blur(function(){
		var pwd=$(this).val();
		var pwdreg=/^[A-Za-z0-9]{1,6}$/;
		if(pwd=="" || pwd==" "){
		    $("#setpwd").html("请输入有效信息！").css({color:"#e4393c",fontWeight:"bold"});
		    return;
		  }else if(!pwdreg.test(pwd)){
			  $(this).val("");
			  alert("输入的密码不符合要求！");
			  return;
		  }
		
		
		
		
		
	})
	
	var result=aa();
	$("#can_span").click(function(){
	  result=aa();
	});
	console.log(result);
	$("#reg_").click(function(){
		var code=$("#checkCode").val();
		console.log(code);
		  if(code==result){
		    $("#checkCode_p").html("验证码输入正确").css({display:"block",backgroundColor:"rgb(0,205,0)"});
		   var pwd=$("#set_pwd").val();
		   var uname=$("#uname").val();
		    if(uname==""||uname==" "){
		    	alert("此表单无法提交！");
		    	return;
		    }else if(pwd ==""|| pwd==" "){
		    	alert("此表单无法提交！");
		    	return;
		    }
		    
		    $("#formRegiste").submit();
		  }else{
		    $("#checkCode_p").html("验证码输入错误 请重新输入").css({display:"block"});
		  }
	});
	
	
	</script>
 </body>
</html>